<template>
  <view class="password-input">
    <input
      type="password"
      v-if="pwdType === 'password'"
      :value="modelValue"
      @input="changeValue"
      placeholder="请确认密码" />
    <input
      type="text"
      v-if="pwdType === 'text'"
      :value="modelValue"
      @input="changeValue"
      placeholder="请确认密码" />
    <image
      v-if="pwdType === 'text'"
      @click="changePwdType('password')"
      class="changePwd"
      src="../../static/login/hidePwd.png"
      mode="scaleToFill" />
    <image
      v-else
      @click="changePwdType('text')"
      class="changePwd"
      src="../../static/login/showPwd.png"
      mode="scaleToFill" />
  </view>
</template>
<script setup lang="ts">
import { ref } from "vue";

const pwdType = ref("password");
function changePwdType(type: string) {
  pwdType.value = type;
}

const props = defineProps({
  modelValue: {
    type: String,
    required: true,
  },
});

const emits = defineEmits(["update:modelValue"]);

function changeValue(e) {
  emits("update:modelValue", e.detail.value);
}
</script>
<style lang="scss">
.password-input {
  flex: 1;
  display: flex;
  width: 100%;
  input {
    padding-right: 0 !important;
  }
  .changePwd {
    padding: 38upx 40upx;
    width: 40upx;
    height: 28upx;
    z-index: 10;
  }
}
</style>
